<template>
  <div id="house">
    <div v-show="pageInfo.cur === 1">
      <f7-block-title>基本信息</f7-block-title>
      <f7-list id="house-form-1" inline-labels form bg-color="white" class="no-margin">
        <f7-list-item title="乡镇名" smart-select :smart-select-params="{openIn: 'popup', closeOnSelect: true, searchbar: true, searchbarPlaceholder: '按汉字进行搜索'}">
          <select name="town" v-model="townid">
            <optgroup v-for="t in place.filter(item => item.level === 1)" :label="t.pname">
              <option v-for="p in place.filter(item => item.pid === t.id)" :value="p.id">{{p.pname}}</option>
            </optgroup>
          </select>
        </f7-list-item>
        <f7-list-item class="cunname" title="村名" smart-select :smart-select-params="{openIn: 'popup', closeOnSelect: true, searchbar: true, searchbarPlaceholder: '按汉字进行搜索'}">
          <select name="village" v-model="villageid">
            <optgroup v-for="v in place.filter(item => item.id === townid)" :label="v.pname">
              <option v-for="p in place.filter(item => item.pid === townid)" :value="p.id">{{p.pname}}</option>
            </optgroup>
          </select>
        </f7-list-item>
        <f7-list-item>
          <f7-label>督查时间</f7-label>
          <f7-input id="duchatime" type="text" name="time" readonly></f7-input>
        </f7-list-item>
        <f7-list-item>
          <f7-label>户主姓名</f7-label>
          <f7-input type="text" name="name" v-model="hname" @input="hname = $event.target.value"></f7-input>
        </f7-list-item>
        <f7-list-item title="性别" smart-select :smart-select-params="{openIn: 'popover', closeOnSelect: true}">
          <select name="sex">
            <option value="1">男</option>
            <option value="0">女</option>
          </select>
        </f7-list-item>
        <f7-list-item>
          <f7-label>年龄</f7-label>
          <f7-input type="number" name="age"></f7-input>
        </f7-list-item>
        <f7-list-item title="民族" smart-select :smart-select-params="{openIn: 'popup', closeOnSelect: true, searchbar: true, searchbarPlaceholder: '按汉字进行搜索'}">
          <select name="nation">
            <option v-for="n in nationality" :value="n">{{n}}</option>
          </select>
        </f7-list-item>
        <f7-list-item title="类别" smart-select :smart-select-params="{openIn: 'popover', closeOnSelect: true}">
          <select name="type">
            <option value="1">未脱贫户</option>
            <option value="2">低保户</option>
            <option value="3">兜底户</option>
            <option value="4">五保户</option>
            <option value="5">已脱贫户</option>
          </select>
        </f7-list-item>
      </f7-list>
      <f7-block-title>调查了解内容</f7-block-title>
      <f7-list id="house-form-2" form bg-color="white" class="no-margin">
        <f7-list-item title="家庭成员情况">
          <f7-input type="textarea" name="family_member"></f7-input>
        </f7-list-item>
        <f7-list-item title="家庭收入情况">
          <f7-input type="textarea" name="income"></f7-input>
        </f7-list-item>
        <f7-list-item title="致贫原因">
          <f7-input type="textarea" name="poverty_causes"></f7-input>
        </f7-list-item>
      </f7-list>
    </div>
    <div v-show="pageInfo.cur === 2">
      <f7-block-title>吃、穿保障情况</f7-block-title>
      <f7-list id="house-form-3" form bg-color="white" class="no-margin">
        <f7-list-item title="食品是否有保障">
          <f7-toggle slot="after" name="food"></f7-toggle>
        </f7-list-item>
        <f7-list-item title="粮食来源" smart-select :smart-select-params="{openIn: 'popover', closeOnSelect: true}">
          <select name="food_come">
            <option value="0">粮食自产</option>
            <option value="1">购买粮食</option>
          </select>
        </f7-list-item>
        <f7-list-item title="饮水安全是否达标">
          <f7-toggle slot="after" name="water_safety" @toggle:change="watersafety_ = !$event"></f7-toggle>
        </f7-list-item>
        <f7-list-item v-show="watersafety_">
          <f7-label>饮水安全不达标原因</f7-label>
          <f7-input type="textarea" name="water_safety_reason"></f7-input>
        </f7-list-item>
        <f7-list-item title="是否有保暖保障(衣服)">
          <f7-toggle slot="after" name="dress_security" @toggle:change="dresssecurity_ = !$event"></f7-toggle>
        </f7-list-item>
        <f7-list-item v-show="dresssecurity_">
          <f7-label>没有保暖保暖保障具体</f7-label>
          <f7-input type="textarea" name="dress_security_detail"></f7-input>
        </f7-list-item>
      </f7-list>
      <f7-block-title>基本医疗保障情况</f7-block-title>
      <f7-list id="house-form-4" form bg-color="white" class="no-margin">
        <f7-list-item title="家庭成员是否全部参加医疗保险">
          <f7-toggle slot="after" name="medicare" @toggle:change="medicare_ = !$event"></f7-toggle>
        </f7-list-item>
        <f7-list-item v-show="medicare_">
          <f7-label>参加基本医疗保障人数</f7-label>
          <f7-input type="number" name="medicare_num"></f7-input>
        </f7-list-item>
        <f7-list-item title="是否了解贫困户" v-show="medicare_">
          <f7-toggle slot="after" name="poor1_households"></f7-toggle>
        </f7-list-item>
        <f7-list-item title="家庭成员全部购买特惠保">
          <f7-toggle slot="after" name="special_protection" @toggle:change="specialprotection_ = !$event"></f7-toggle>
        </f7-list-item>
        <f7-list-item v-show="specialprotection_">
          <f7-label>购买特惠保人数</f7-label>
          <f7-input type="number" name="special_protection_num"></f7-input>
        </f7-list-item>
        <f7-list-item title="是否了解贫困户" v-show="specialprotection_">
          <f7-toggle slot="after" name="poor2_households"></f7-toggle>
        </f7-list-item>
        <f7-list-item title="是否享受医疗救助策略">
          <f7-toggle slot="after" name="medical_assistance" @toggle:change="medicalassistance_ = $event"></f7-toggle>
        </f7-list-item>
        <f7-list-item v-show="medicalassistance_">
          <f7-label>有住院情况，补偿详情</f7-label>
          <f7-input type="textarea" name="medical_assistance_detail"></f7-input>
        </f7-list-item>
      </f7-list>
    </div>
    <div v-show="pageInfo.cur === 3">
      <f7-block-title>义务教育保障情况</f7-block-title>
      <f7-list id="house-form-5" form bg-color="white" class="no-margin">
        <f7-list-item title="18周岁以下人口是否完成义务教育">
          <f7-toggle slot="after" name="education" @toggle:change="education_ = !$event"></f7-toggle>
        </f7-list-item>
        <f7-list-item v-show="education_">
          <f7-label>18周岁以下未完成义务教育人员姓名</f7-label>
          <f7-input type="text" name="education_name"></f7-input>
        </f7-list-item>
        <f7-list-item title="是否有辍学现象">
          <f7-toggle slot="after" name="dropout" @toggle:change="dropout_ = $event"></f7-toggle>
        </f7-list-item>
        <f7-list-item v-show="dropout_">
          <f7-label>辍学原因</f7-label>
          <f7-input type="textarea" name="dropout_reason"></f7-input>
        </f7-list-item>
        <f7-list-item title="是否享受教育帮扶政策">
          <f7-toggle slot="after" name="education_support"></f7-toggle>
          <!--  @toggle:change="educationsupport_ = $event" -->
        </f7-list-item>
        <f7-list-item>
          <!--  v-show="educationsupport_" -->
          <f7-label>在校就读人数</f7-label>
          <f7-input type="number" name="education_num"></f7-input>
        </f7-list-item>
        <f7-list-item>
          <!--  v-show="educationsupport_" -->
          <f7-label>就读学校名称</f7-label>
          <f7-input type="text" name="schools"></f7-input>
        </f7-list-item>
        <f7-list-item>
          <!--  v-show="educationsupport_" -->
          <f7-label>每年补助金额度</f7-label>
          <f7-input type="number" name="student_grant"></f7-input>
        </f7-list-item>
      </f7-list>
      <f7-block-title>职业或高等教育情况</f7-block-title>
      <f7-list id="house-form-6" form bg-color="white" class="no-margin">
        <f7-list-item title="家庭是否有人在受职业或高等教育">
          <f7-toggle slot="after" name="higher_education" @toggle:change="highereducation_ = $event"></f7-toggle>
        </f7-list-item>
        <f7-list-item v-show="highereducation_">
          <f7-label>就读高校或职校人数</f7-label>
          <f7-input type="number" name="h_education_num"></f7-input>
        </f7-list-item>
        <f7-list-item v-show="highereducation_">
          <f7-label>就读高校或职校名称</f7-label>
          <f7-input type="text" name="h_education_name"></f7-input>
        </f7-list-item>
        <f7-list-item v-show="highereducation_">
          <f7-label>参加职业就业培训人数</f7-label>
          <f7-input type="number" name="career_training_num"></f7-input>
        </f7-list-item>
        <f7-list-item v-show="highereducation_">
          <f7-label>参加职业就业培训机构名称</f7-label>
          <f7-input type="text" name="career_training_name"></f7-input>
        </f7-list-item>
      </f7-list>
    </div>
    <div v-show="pageInfo.cur === 4">
      <f7-block-title>住房安全保障情况</f7-block-title>
      <f7-list id="house-form-7" form bg-color="white" class="no-margin">
        <f7-list-item title="房屋结构是否安全">
          <f7-toggle slot="after" name="housing_security" @toggle:change="housingsecurity_ = !$event"></f7-toggle>
        </f7-list-item>
        <f7-list-item v-show="housingsecurity_">
          <f7-label>房屋结构不安全具体</f7-label>
          <f7-input type="textarea" name="housing_security_detail"></f7-input>
        </f7-list-item>
        <f7-list-item title="住房地基是否安全">
          <f7-toggle slot="after" name="foundation_safety" @toggle:change="foundationsafety_ = !$event"></f7-toggle>
        </f7-list-item>
        <f7-list-item v-show="foundationsafety_">
          <f7-label>住房地基不安全具体</f7-label>
          <f7-input type="textarea" name="foundation_safety_detail"></f7-input>
        </f7-list-item>
        <f7-list-item title="住房是否拥挤，不能满足正常使用要求">
          <f7-toggle slot="after" name="overcrowded" @toggle:change="overcrowded_ = $event"></f7-toggle>
        </f7-list-item>
        <f7-list-item v-show="overcrowded_">
          <f7-label>住房拥挤具体</f7-label>
          <f7-input type="textarea" name="overcrowded_detail"></f7-input>
        </f7-list-item>
        <f7-list-item title="是否是危房改造">
          <f7-toggle slot="after" name="house_renovation" @toggle:change="houserenovation_ = $event"></f7-toggle>
        </f7-list-item>
        <f7-list-item title="危房改造级别" v-show="houserenovation_" smart-select :smart-select-params="{openIn: 'popover', closeOnSelect: true}">
          <select name="house_renovation_level">
            <option value="C">C级</option>
            <option value="D">D级</option>
          </select>
        </f7-list-item>
        <f7-list-item title="危房改造资金是否发放" v-show="houserenovation_">
          <f7-toggle name="house_renovation_give"></f7-toggle>
        </f7-list-item>
        <f7-list-item v-show="houserenovation_">
          <f7-label>危房改造补助金额(万元)</f7-label>
          <f7-input type="number" name="house_renovation_money"></f7-input>
        </f7-list-item>
        <f7-list-item title="是否是易地搬迁户">
          <f7-toggle slot="after" name="relocation" @toggle:change="relocation_ = $event"></f7-toggle>
        </f7-list-item>
        <f7-list-item v-show="relocation_">
          <f7-label>搬迁人数</f7-label>
          <f7-input type="number" name="relocation_num"></f7-input>
        </f7-list-item>
        <f7-list-item v-show="relocation_">
          <f7-label>搬迁地点</f7-label>
          <f7-input type="text" name="relocation_place"></f7-input>
        </f7-list-item>
      </f7-list>
      <f7-block-title>就业情况</f7-block-title>
      <f7-list id="house-form-8" form bg-color="white" class="no-margin">
        <f7-list-item title="家庭是否有就业人员">
          <f7-toggle name="employment"></f7-toggle>
        </f7-list-item>
        <f7-list-item>
          <f7-label>就业情况具体</f7-label>
          <f7-input type="textarea" name="employment_detail"></f7-input>
        </f7-list-item>
      </f7-list>
    </div>
    <div v-show="pageInfo.cur === 5">
      <f7-block-title>产业发展情况</f7-block-title>
      <f7-list id="house-form-9" form bg-color="white" class="no-margin">
        <f7-list-item title="是否有稳定持续增收的产业">
          <f7-toggle name="income_industry" @toggle:change="incomeindustry_ = $event"></f7-toggle>
        </f7-list-item>
        <f7-list-item v-show="incomeindustry_">
          <f7-label>稳定持续增收的产业具体</f7-label>
          <f7-input type="textarea" name="income_industry_detail"></f7-input>
        </f7-list-item>
        <f7-list-item title="是否与种养大户形成结对帮扶">
          <f7-toggle name="farming_help" @toggle:change="farminghelp_ = $event"></f7-toggle>
        </f7-list-item>
        <f7-list-item v-show="farminghelp_">
          <f7-label>与种养大户形成结对帮扶具体</f7-label>
          <f7-input type="textarea" name="farming_help_detail"></f7-input>
        </f7-list-item>
        <f7-list-item title="是否参与合作社">
          <f7-toggle name="cooperation" @toggle:change="cooperation_ = $event"></f7-toggle>
        </f7-list-item>
        <f7-list-item v-show="cooperation_">
          <f7-label>参与合作社具体</f7-label>
          <f7-input type="textarea" name="cooperation_detail"></f7-input>
        </f7-list-item>
        <f7-list-item title="产业帮扶资金是否落实">
          <f7-toggle name="assist_money"></f7-toggle>
        </f7-list-item>
      </f7-list>
      <f7-block-title>扶贫相关</f7-block-title>
      <f7-list id="house-form-10" form bg-color="white" class="no-margin">
        <f7-list-item title="扶贫手册内容是否完整">
          <f7-toggle name="handbook" @toggle:change="handbook_ = !$event"></f7-toggle>
        </f7-list-item>
        <f7-list-item v-show="handbook_">
          <f7-label>扶贫手册内容不完整具体</f7-label>
          <f7-input type="textarea" name="handbook_detail"></f7-input>
        </f7-list-item>
        <f7-list-item title="扶贫手册填写是否规范">
          <f7-toggle name="write_standard" @toggle:change="writestandard_ = !$event"></f7-toggle>
        </f7-list-item>
        <f7-list-item v-show="writestandard_">
          <f7-label>填写是不规范具体</f7-label>
          <f7-input type="textarea" name="write_standard_detail"></f7-input>
        </f7-list-item>
        <f7-list-item title="对扶贫政策是否了解">
          <f7-toggle name="poverty_know" @toggle:change="povertyknow_ = !$event"></f7-toggle>
        </f7-list-item>
        <f7-list-item v-show="povertyknow_">
          <f7-label>对扶贫政策不了解原因</f7-label>
          <f7-input type="textarea" name="poverty_know_reason"></f7-input>
        </f7-list-item>
        <f7-list-item title="对帮扶负责人是否了解">
          <f7-toggle name="leader_know" @toggle:change="leaderknow_ = $event"></f7-toggle>
        </f7-list-item>
        <f7-list-item v-show="leaderknow_">
          <f7-label>帮扶负责人姓名</f7-label>
          <f7-input type="text" name="leader_name"></f7-input>
        </f7-list-item>
        <f7-list-item v-show="leaderknow_">
          <f7-label>帮扶负责人单位</f7-label>
          <f7-input type="text" name="leader_department"></f7-input>
        </f7-list-item>
        <f7-list-item title="对扶贫工作是否满意">
          <f7-toggle name="job_satisfaction" @toggle:change="jobsatisfaction_ = !$event"></f7-toggle>
        </f7-list-item>
        <f7-list-item v-show="jobsatisfaction_">
          <f7-label>对扶贫工作不满意原因</f7-label>
          <f7-input type="textarea" name="job_satisfaction_reason"></f7-input>
        </f7-list-item>
      </f7-list>
    </div>
    <div v-show="pageInfo.cur === 6">
      <f7-block-title>总结</f7-block-title>
      <f7-list id="house-form-11" form bg-color="white" class="no-margin">
        <f7-list-item title="其他意见">
          <f7-input type="textarea" name="other_advice"></f7-input>
        </f7-list-item>
        <f7-list-item title="督查发现的问题">
          <f7-input type="textarea" name="find_problem" class="bigtextarea"></f7-input>
        </f7-list-item>
        <f7-list-item title="督查工作建议">
          <f7-input type="textarea" name="work_proposal" class="bigtextarea"></f7-input>
        </f7-list-item>
      </f7-list>
    </div>
    <div v-show="pageInfo.cur === 7">
      <f7-block-title>签字确认</f7-block-title>
      <f7-list id="house-form-12" form bg-color="white" class="no-margin">
        <f7-list-item class="inline-labels">
          <f7-label>户主</f7-label>
          <f7-input type="text" :value="hname" readonly></f7-input>
        </f7-list-item>
        <f7-list-item media-list>
          <f7-label>户主签字</f7-label>
        </f7-list-item>
      </f7-list>
    </div>
    <div v-if="pageInfo.cur === 7" style="height: 228px;">
      <img v-if="!!signature1" :src="signature1" width="100%" height="100%">
    </div>
    <div class="hidesignature" :class="{ showsignature: pageInfo.cur === 7 && !signature1 }" style="top: 136px;">
      <vue-signature ref="signature1"></vue-signature>
      <f7-row>
        <f7-col>
          <f7-button small outline round color="red" @click="$refs.signature1.clear()">清除</f7-button>
        </f7-col>
        <f7-col>
          <f7-button small outline round @click="savesign('signature1')">确定</f7-button>
        </f7-col>
      </f7-row>
    </div>
    <div v-show="pageInfo.cur === 7">
      <f7-list id="house-form-13" form bg-color="white" class="no-margin">
        <f7-list-item class="inline-labels">
          <f7-label style="width: 120px;">督查组</f7-label>
          <f7-input type="text" name="inspector" :value="user.name" readonly></f7-input>
        </f7-list-item>
        <f7-list-item media-list>
          <f7-label>督查组签字</f7-label>
        </f7-list-item>
      </f7-list>
    </div>
    <div v-if="pageInfo.cur === 7" style="height: 228px;">
      <img v-if="!!signature2" :src="signature2" width="100%" height="100%">
    </div>
    <div class="hidesignature" :class="{ showsignature: pageInfo.cur === 7 && !signature2 }" style="top: 464px;">
      <vue-signature ref="signature2"></vue-signature>
      <f7-row>
        <f7-col>
          <f7-button small outline round color="red" @click="$refs.signature2.clear()">清除</f7-button>
        </f7-col>
        <f7-col>
          <f7-button small outline round @click="savesign('signature2')">确定</f7-button>
        </f7-col>
      </f7-row>
    </div>
  </div>
</template>
<script>
import { f7BlockTitle, f7List, f7ListItem, f7Label, f7Input, f7Toggle, f7Row, f7Col, f7Button } from 'framework7-vue'
import { mapState, mapActions } from 'vuex'
import formatdate from 'utils/formatdate'
export default {
  components: {
    f7BlockTitle,
    f7List,
    f7ListItem,
    f7Label,
    f7Input,
    f7Toggle,
    f7Row,
    f7Col,
    f7Button
  },
  computed: {
    ...mapState({
      user: state => state.user,
      pageInfo: state => state.page
    })
  },
  data() {
    return {
      townid: null,
      villageid: null,
      nationality: ["汉族", "蒙古族", "满族", "朝鲜族", "赫哲族", "达斡尔族", "鄂温克族", "鄂伦春族", "回族", "东乡族", "土族", "撒拉族", "保安族", "裕固族", "维吾尔族", "哈萨克族", "柯尔克孜族", "锡伯族", "塔吉克族", "乌孜别克族", "俄罗斯族", "塔塔尔族", "藏族", "门巴族", "珞巴族", "羌族", "彝族", "白族", "哈尼族", "傣族", "僳僳族", "佤族", "拉祜族", "纳西族", "景颇族", "布朗族", "阿昌族", "普米族", "怒族", "德昂族", "独龙族", "基诺族", "苗族", "布依族", "侗族", "水族", "仡佬族", "壮族", "瑶族", "仫佬族", "毛南族", "京族", "土家族", "黎族", "畲族", "高山族"],
      watersafety_: true,
      dresssecurity_: true,
      medicare_: true,
      specialprotection_: true,
      education_: true,
      dropout_: false,
      // educationsupport_: true,
      medicalassistance_: true,
      highereducation_: false,
      housingsecurity_: true,
      foundationsafety_: true,
      overcrowded_: false,
      houserenovation_: false,
      relocation_: false,
      incomeindustry_: false,
      farminghelp_: false,
      cooperation_: false,
      handbook_: true,
      writestandard_: true,
      povertyknow_: true,
      leaderknow_: false,
      jobsatisfaction_: true,
      hname: '',
      signature1: '',
      signature2: '',
      context: this.$f7route.context
    }
  },
  created() {

    this.hassave = true
    this.setDate(1)

    this.update_page({ count: 7, cur: 1 })
    this.$root.$off('gopage').$on('gopage', type => {
      if (type === 0) {
        if (this.pageInfo.cur <= 1) return
        if (this.pageInfo.cur == this.pageInfo.count) {
          this.$refs.signature1.clear()
          this.$refs.signature2.clear()
        }
        this.pageInfo.cur -= 1
      } else {
        if (this.pageInfo.cur === this.pageInfo.count) return
        this.pageInfo.cur += 1
      }
    })

    this.$root.$off('save').$on('save', camera => {
      let param = {}
      for (var i = 1; i < 13; i++) {
        const form = this.$f7.form.convertToData('#house-form-' + i)
        param = Object.assign(param, form)
      }
      if (!param.town) {
        this.$f7.toast.show({ text: '请填写乡镇' })
        return
      }
      if (!param.village) {
        this.$f7.toast.show({ text: '请填写村' })
        return
      }
      if (!param.time) {
        this.$f7.toast.show({ text: '请填写督查时间' })
        return
      }
      if (!param.name) {
        this.$f7.toast.show({ text: '请填写户主名' })
        return
      }
      if (this.signature1 || this.signature2) {
        if (camera) {
          this.$f7.dialog.alert('已签字，无法再上传图片')
          return
        }
        const text = []
        text.push(!!this.signature1 ? '户主已签字' : '户主未签字')
        text.push(!!this.signature2 ? '督查组已签字' : '督查组未签字')
        this.$f7.dialog.confirm(`<div>${text.join('</div><div>')}</div>`, '保存后无法修改，确定保存', () => {
          this.saveData(param)
        })
      } else {
        this.saveData(param, camera)
      }
    })
  },
  mounted() {
    var self = this
    let minDate = new Date()
    minDate.setDate(minDate.getDate() - 1)
    this.$f7.calendar.create({
      inputEl: '#duchatime>input',
      openIn: 'customModal',
      closeOnSelect: true,
      routableModals: false,
      animate: false,
      minDate,
      monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
      dayNamesShort: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
      on: {
        open: calendar => {
          this.$$('#framework7-root').append('<div class="calendar-backdrop backdrop-in"></div>').find('.calendar-backdrop').click(function() {
            self.$$(this).remove()
            calendar.close()
          })
          const time = this.$$('#duchatime>input').val()
          if (!time) return
          calendar.setValue([time])
        },
        close: calendar => {
          this.$$('#framework7-root .calendar-backdrop').remove()
        }
      }
    })

    this.$$('.hidesignature').touchmove(function(e) {
      e.preventDefault()
    })

    this.$f7.preloader.hide()
  },
  methods: {
    ...mapActions([
      'update_page'
    ]),
    savesign(i) {
      if (i === 'signature1' && !this.$$('input[name="name"]').val()) {
        this.$f7.toast.show({ text: '请先填户主' })
        return
      }
      this.$f7.dialog.confirm('请确保表单填写完整且签名无误', '', () => {
        this[i] = this.$refs[i].save()
      })
    },
    async saveData(param, camera) {
      param.edittime = formatdate(new Date(), 'yyyy-MM-dd hh:mm:ss')
      param.client_sign = this.signature1
      param.inspector_sign = this.signature2
      if ((!!this.signature1 && !this.signature2) || (!this.signature1 && !!this.signature2)) {
        param.state = 1
      } else if (!!this.signature1 && !!this.signature2) {
        param.state = 2
        param.overtime = formatdate(new Date(), 'yyyy-MM-dd hh:mm:ss')
      } else {
        param.state = 0
      }
      param.inspector = this.user.id
      for (let key in param) {
        if (param[key] === '') {
          delete param[key]
          continue
        }
        if (!Array.isArray(param[key])) continue
        param[key] = param[key].length
      }
      this.requestId && (param.id = this.requestId)
      const house = await this.request('/house', param)
      if (house.code === 1) {
        this.requestId = this.$root.requestId = house.data
        this.hassave = true
        this.$emit('update:status', param.state)
        if (!camera) {
          this.$f7.toast.show({ text: house.msg })
        } else {
          camera(this.requestId)
        }
      } else {
        this.$f7.dialog.confirm(house.msg, '', () => {
          // 跳转到查看页面 TODO
        })
      }
    },
    async setDate(page) {
      const { id, type } = this.context
      if ((id || this.requestId) && this.hassave) {
        const { data } = await this.request('/getdata', { id: id || this.requestId, type })
        if (!data && !data.id) return
        this.requestId = data.id
        this.viewdata = data
        this.hassave = false
      }
      if (!this.viewdata) return
      if (page === 1) {
        this.hname = this.viewdata.name
        this.$f7.form.fillFromData('#house-form-1', {
          town: this.viewdata.town,
          time: formatdate(new Date(this.viewdata.time), 'yyyy-MM-dd'),
          name: this.viewdata.name,
          sex: this.viewdata.sex,
          age: this.viewdata.age,
          nation: this.viewdata.nation,
          type: this.viewdata.type
        })
        this.$nextTick(() => {
          this.$f7.form.fillFromData('#house-form-1', {
            village: this.viewdata.village
          })
        })
        this.$f7.form.fillFromData('#house-form-2', {
          family_member: this.viewdata.family_member,
          income: this.viewdata.income,
          poverty_causes: this.viewdata.poverty_causes
        })
      } else if (page === 2) {
        this.$f7.form.fillFromData('#house-form-3', {
          food: this.viewdata.food ? [''] : [],
          food_come: this.viewdata.food_come,
          water_safety: this.viewdata.water_safety ? [''] : [],
          water_safety_reason: this.viewdata.water_safety_reason,
          dress_security: this.viewdata.dress_security ? [''] : [],
          dress_security_detail: this.viewdata.dress_security_detail
        })
        this.$f7.form.fillFromData('#house-form-4', {
          medicare: this.viewdata.medicare ? [''] : [],
          medicare_num: this.viewdata.medicare_num,
          poor1_households: this.viewdata.poor1_households ? [''] : [],
          special_protection: this.viewdata.special_protection ? [''] : [],
          special_protection_num: this.viewdata.special_protection_num,
          poor2_households: this.viewdata.poor2_households ? [''] : [],
          medical_assistance: this.viewdata.medical_assistance ? [''] : [],
          medical_assistance_detail: this.viewdata.medical_assistance_detail
        })
      } else if (page === 3) {
        this.$f7.form.fillFromData('#house-form-5', {
          education: this.viewdata.education ? [''] : [],
          education_name: this.viewdata.education_name,
          dropout: this.viewdata.dropout ? [''] : [],
          dropout_reason: this.viewdata.dropout_reason,
          education_support: this.viewdata.education_support ? [''] : [],
          education_num: this.viewdata.education_num,
          schools: this.viewdata.schools,
          student_grant: this.viewdata.student_grant
        })
        this.$f7.form.fillFromData('#house-form-6', {
          higher_education: this.viewdata.higher_education ? [''] : [],
          h_education_num: this.viewdata.h_education_num,
          h_education_name: this.viewdata.h_education_name,
          career_training_num: this.viewdata.career_training_num,
          career_training_name: this.viewdata.career_training_name
        })
      } else if (page === 4) {
        this.$f7.form.fillFromData('#house-form-7', {
          housing_security: this.viewdata.housing_security ? [''] : [],
          housing_security_detail: this.viewdata.housing_security_detail,
          foundation_safety: this.viewdata.foundation_safety ? [''] : [],
          foundation_safety_detail: this.viewdata.foundation_safety_detail,
          overcrowded: this.viewdata.overcrowded ? [''] : [],
          overcrowded_detail: this.viewdata.overcrowded_detail,
          house_renovation: this.viewdata.house_renovation ? [''] : [],
          house_renovation_level: this.viewdata.house_renovation_level,
          house_renovation_give: this.viewdata.house_renovation_give ? [''] : [],
          house_renovation_money: this.viewdata.house_renovation_money,
          relocation: this.viewdata.relocation ? [''] : [],
          relocation_num: this.viewdata.relocation_num,
          relocation_place: this.viewdata.relocation_place
        })
        this.$f7.form.fillFromData('#house-form-8', {
          employment: this.viewdata.employment ? [''] : [],
          employment_detail: this.viewdata.employment_detail
        })
      } else if (page === 5) {
        this.$f7.form.fillFromData('#house-form-9', {
          income_industry: this.viewdata.income_industry ? [''] : [],
          income_industry_detail: this.viewdata.income_industry_detail,
          farming_help: this.viewdata.farming_help ? [''] : [],
          farming_help_detail: this.viewdata.farming_help_detail,
          cooperation: this.viewdata.cooperation ? [''] : [],
          cooperation_detail: this.viewdata.cooperation_detail,
          assist_money: this.viewdata.assist_money ? [''] : []
        })
        this.$f7.form.fillFromData('#house-form-10', {
          handbook: this.viewdata.handbook ? [''] : [],
          handbook_detail: this.viewdata.handbook_detail,
          write_standard: this.viewdata.write_standard ? [''] : [],
          write_standard_detail: this.viewdata.write_standard_detail,
          poverty_know: this.viewdata.poverty_know ? [''] : [],
          poverty_know_reason: this.viewdata.poverty_know_reason,
          leader_know: this.viewdata.leader_know ? [''] : [],
          leader_name: this.viewdata.leader_name,
          leader_department: this.viewdata.leader_department,
          job_satisfaction: this.viewdata.job_satisfaction ? [''] : [],
          job_satisfaction_reason: this.viewdata.job_satisfaction_reason
        })
      } else if (page === 6) {
        this.$f7.form.fillFromData('#house-form-11', {
          other_advice: this.viewdata.other_advice,
          find_problem: this.viewdata.find_problem,
          work_proposal: this.viewdata.find_problem
        })
      } else if (page === 7) {
        this.$f7.form.fillFromData('#house-form-13', {
          inspector: this.viewdata.inspectorname
        })
        if (this.viewdata.client_sign) {
          this.signature1 = (new Buffer(this.viewdata.client_sign, 'base64')).toString('utf8')
        }
        if (this.viewdata.inspector_sign) {
          this.signature2 = (new Buffer(this.viewdata.inspector_sign, 'base64')).toString('utf8')
        }
      }
    }
  },
  watch: {
    'townid': function() {
      this.villageid = ''
      this.$$('#house .cunname .item-after').html('')
    },
    'pageInfo.cur': function() {
      this.$nextTick(() => {
        this.setDate(this.pageInfo.cur)
        this.$$('#house').scrollTop(0)
      })
    }
  }
}
</script>